<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;">
        <div class="chart-wrapper">
          <ul class="flex-row ulMy">
            <li
              v-for="(item, index) in tableData"
              :key="index"
              :class="[
                step > index ? 'active' : 'not',
                active > index ? 'active' : '',
                active === index ? 'activeLi' : '',
              ]"
              @click="handleTabClick(index)"
            >
              <div>{{ item.name }}</div>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    active: {
      type: Number,
      default: 0
    },
    step: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {}
  },
  methods: {
    handleTabClick(index) {
      this.$emit('getTabIndex', index)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table th.is-leaf,
::v-deep .el-table td,
::v-deep .el-table__body {
  border: 0;
}
::v-deep .el-table::before,
::v-deep .el-table__fixed-right::before {
  display: none;
}
::v-deep th {
  background: #cacaca;
  font-weight: bold;
  color: #575757;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #f7f7f7;
}
.myBnt {
  color: #5ac6b7;
  display: block;
  width: 100px;
  margin-left: 115px;
  margin-bottom: 20px;
  border: 0;
}
.divUl {
  margin: 0px auto 0 auto;
}
h5,
p {
  padding: 0;
  margin: 0;
}
.ulMy {
  flex-wrap: wrap;
  width: 166px;
  padding-left: 10px;
}
.ulMy li {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  height: 40px;
  line-height: 40px;
}
.ulMy li i {
  color: #6a6a6a;
  font-size: 13px;
  align-self: self-start;
  margin-top: 23px;
}
.ulMy li p {
  color: #6a6a6a;
  font-size: 13px;
}
.ulMy li h5 {
  font-size: 16px;
  color: #151515;
  margin-bottom: 10px;
}
.ulMy li div {
  background: #fff;
  margin-left: 0px;
  flex: 1;
  padding: 0px;
  box-sizing: border-box;
  border-radius: 2px;
  text-align: center;
  font-size: 12px;
}
.ulMy li em {
  color: #5ac6b7;
  margin-left: 3px;
}
.ulMy li dfn {
  color: #5ac6b7;
  margin-top: 3px;
  font-size: 12px;
  display: block;
  margin-top: 10px;
}
.ulMy li.not {
  color: #ccc;
}
.ulMy li.not h5 {
  font-size: 16px;
  color: #ccc;
  margin-bottom: 10px;
}
.ulMy li.not div {
  background: #fff;
  margin-left: 0px;
  flex: 1;
  padding: 0px;
  box-sizing: border-box;
  border-radius: 2px;
}
.ulMy li.not p {
  color: #ccc;
}
.ulMy li.activeLi div {
  background: #5ac6b7 !important;
  color: #fff;
  cursor: pointer;
}
.ulMy li.active div {
  cursor: pointer;
  font-weight: 500;
}
.overview-content {
  min-height: calc(100vh - 160px);
  background: #eee;
}
.myDigo h2 {
  background: #343436;
}
::v-deep .myDigo .el-dialog__footer {
  background: #e5e9ed;
  padding-top: 15px;
}
::v-deep .el-dialog.myDigo .el-dialog__body {
  padding: 0;
}
::v-deep .el-dialog.myDigo .el-dialog__header {
  display: none;
}
.el-dialog.myDigo h2 {
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 39px;
  padding-right: 39px;
  color: #fff;
  font-size: 18px;
  padding-top: 0;
  margin-top: 0;
  overflow: hidden;
  font-weight: normal;
  font-family: "SourceHanSansSC-regular";
}
.el-dialog.myDigo h2 i {
  font-size: 26px;
  cursor: pointer;
}
::v-deep .el-dialog.myDigo .el-dialog__body {
  text-align: left;
}
.formDiv {
  padding-left: 39px;
  padding-right: 39px;
}
.divSE {
  text-align: center;
}
.divSE em {
  display: block;
}
.fileWD {
  font-size: 46px;
  color: #5ac6b7;
}
.titleDiv {
  background: #5ac6b7;
  padding-left: 20px;
  color: #fff;
  height: 60px;
  line-height: 60px;
}
.two {
  margin: 10px 0;
  font-size: 13px;
  padding-left: 10px;
  padding-right: 10px;
}
.overview-tabs {
  background: #6a6a6a !important;
}
</style>
